<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-plus/2.4.4/index.css">
    <style>
        .container {
            width: 800px;
            margin: 20px auto;
            padding: 20px;
        }
        .order-info {
            margin-bottom: 20px;
        }
        .price {
            color: #f56c6c;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <el-card v-if="order">
            <div class="order-info">
                <h2>订单详情</h2>
                <p>订单号：{{ order.id }}</p>
                <p>商品ID：{{ order.goodsId }}</p>
                <p>订单状态：{{ getOrderStatus(order.orderStatus) }}</p>
                <p>创建时间：{{ formatTime(order.createTime) }}</p>
                <p v-if="order.payTime">支付时间：{{ formatTime(order.payTime) }}</p>
            </div>
            <div class="actions">
                <el-button type="primary" @click="pay" v-if="order.orderStatus === 0">
                    立即支付
                </el-button>
                <el-button @click="goBack">返回列表</el-button>
            </div>
        </el-card>
    </div>

    <script src="https://cdn.staticfile.org/vue/3.4.3/vue.global.min.js"></script>
    <script src="https://cdn.staticfile.org/element-plus/2.4.4/index.full.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/1.6.2/axios.min.js"></script>
    <script>
        const { createApp, ref, onMounted } = Vue;

        const app = createApp({
            setup() {
                const order = ref(null);

                const getOrderId = () => {
                    const urlParams = new URLSearchParams(window.location.search);
                    return urlParams.get('orderId');
                };

                const loadOrder = async () => {
                    const orderId = getOrderId();
                    if (!orderId) return;
                    
                    try {
                        const response = await axios.get(`/api/seckill/order/${orderId}`);
                        order.value = response.data.data;
                    } catch (error) {
                        ElMessage.error('加载订单失败');
                    }
                };

                const formatTime = (time) => {
                    return new Date(time).toLocaleString();
                };

                const getOrderStatus = (status) => {
                    switch (status) {
                        case 0: return '待支付';
                        case 1: return '已支付';
                        case 2: return '已取消';
                        default: return '未知状态';
                    }
                };

                const pay = () => {
                    ElMessage.success('支付功能开发中...');
                };

                const goBack = () => {
                    window.location.href = '/';
                };

                onMounted(() => {
                    loadOrder();
                });

                return {
                    order,
                    formatTime,
                    getOrderStatus,
                    pay,
                    goBack
                };
            }
        });

        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html> 